<template>
	<view>
		<!-- 顶部搜索导航栏 -->
		<view class="search_box">
			<i class="iconfont iconzuo" @click="navTouser"></i>
			<input type="text" placeholder="搜索会员卡卡号" class="input" />
		</view>
		<!-- 会员卡列表 -->
		<view class="vip_list">
			<view :class="{'style':titleName==0}" @click="select(0)">全部({{dataList.length}})</view>
			<view :class="{'style':titleName==1}" @click="select(1)">未使用({{dataList1.length}})</view>
			<view :class="{'style':titleName==2}" @click="select(2)">已使用({{dataList2.length}})</view>
			<!-- <view :class="{'style':titleName==3}" @click="select(3)">已使用({{dataList3.length}})</view> -->
		</view>
		<!-- 全部 -->
		<swiper class="swiper-box" duration="300" @change="changeTab" :current="titleName">
			<swiper-item class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="getMoreOrderList">
					<view  v-for="(item,index) in dataList" :key='index' >
						<view v-if="item.type==2" class="used">
							<view class="used_name">牡丹链会员卡</view>
							<view style="margin-top: 25rpx;">
								<text style="color: #999999;">卡号:</text>
								<text class="used_num">{{item.card_num}}</text>
							</view>
							<view class="used_time">
								<text style="color: #999999; margin-right: 20rpx;">密码:</text>
								<text>{{item.card_password}}</text>
							</view>
							<view class="">
								<image src="/static/vip_center/used.png" mode="widthFix" class="used_img"></image>
							</view>
						</view>
						<view class="wei"  v-if="item.type==0">
							<view class="wei_name">牡丹链会员卡</view>
							<view style="margin-top: 25rpx;">
								<text style="color: #FFFFFF;">卡号:</text>
								<text class="wei_num">{{item.card_num}}</text>
							</view>
							<view class="wei_time">
								<text style="color: #FFFFFF; margin-right: 20rpx;">密码:</text>
								<text>{{item.card_password}}</text>
							</view>
							<view class="wei_you">
								未发放
							</view>
						</view>
						<view class="yisend"  v-if="item.type==1">
							<view class="wei_name">牡丹链会员卡</view>
							<view style="margin-top: 25rpx;">
								<text style="color: #FFFFFF;">卡号:</text>
								<text class="wei_num">{{item.card_num}}</text>
							</view>
							<view class="wei_time">
								<text style="color: #FFFFFF; margin-right: 20rpx;">密码:</text>
								<text>{{item.card_password}}</text>
							</view>
							<view class="wei_you">已发放</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 未发放 -->
			<swiper-item class="tab-content" >
				<scroll-view class="list-scroll-content nosend" scroll-y @scrolltolower="getMoreOrderList">
					<view class="unissued" v-for="(item,index) in dataList1" :key=index v-if="item.type==0">
						<!-- <view>
							<view class="select_single">
								<image src="../../../static/vip_center/selected.png" mode="widthFix" v-if="item.flag==true"></image>
							</view>
							
						</view> -->
						<view class="left">
							<view class="unissued_name">牡丹链会员卡</view>
							<view>
								<text class="unissued_card">卡号:</text>
								<text class="unissued_num">{{item.card_num}}</text>
							</view>
							<view class="unissued_time">
								<text style="color: #999999; margin-right: 20rpx;">密码:</text>
								<text>{{item.card_password}}</text>
							</view>
						</view>
						<view class="right">未使用</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 已发放 -->
			<swiper-item class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="getMoreOrderList">
					<view class="unissued" v-for="(item,index) in dataList2" :key='index'>
						<view class="left">
							<view class="unissued_name">牡丹链会员卡</view>
							<view>
								<text class="unissued_card">卡号:</text>
								<text class="unissued_num">{{item.card_num}}</text>
							</view>
							<view class="unissued_time">
								<text style="color: #999999; margin-right: 20rpx;">密码:</text>
								<text>{{item.card_password}}</text>
							</view>
							
						</view>
						<view class="right">已使用</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 已使用 -->
			<!-- <swiper-item class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="getMoreOrderList">
					<view class="used" v-for="(item,index) in dataList3" :key=index>
						<view class="used_name">牡丹链会员卡</view>
						<view style="margin-top: 25rpx;">
							<text style="color: #999999;">卡号:</text>
							<text class="used_num">{{item.card_num}}</text>
						</view>
						<view class="used_time">
							<text style="color: #999999; margin-right: 20rpx;">密码:</text>
							<text>{{item.card_password}}</text>
						</view>
						<view class="">
							<image src="/static/vip_center/used.png" mode="widthFix" class="used_img"></image>
						</view>
					</view>
				</scroll-view>
			</swiper-item> -->
		</swiper>
		<!-- <view class="bottom" v-if="titleName==1">
			<view class="bottom_top">
				<view @click="selectAll">
					<view class="select_all"  >
						<image src="../../../static/vip_center/selected.png" mode="widthFix" style="width: 100%; height: 100%;" v-if="isAllSelected==true"></image>
					</view>
					
				</view>
				<view class="quanxuan">全选</view>
				<view class="select_num">已选择{{selected.length}}张</view>
				<input class="input_num" type="text" placeholder="请输入要发放数量"/>
			</view>
			<view class="bottom_btm">
				<view class="cancel" @click="cencel">取消</view>
				<view class="send" @click="send">发放</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {allCard,applyCard,applyChangeCard,allAgentCard} from "@/api/product";
	export default {
		data() {
			return {
				titleName:0,
				flag:'',
				sele:'',
				dataList:[],
				dataList1:[],
				dataList2:[],
				dataList3:[],
				selectedList:[],
				num1:0,
				num2:0,
				num3:0,
				num4:0,
				isAllSelected:false,
				selected:[]
			}
		},
		watch:{
			dataList1:{
				deep:true,
				handler(news,old){
					this.selected=[]
					this.dataList1.forEach(item=>{
						if(item.flag==true){
							this.selected.push(item.id)
						}
					})
				}
			}
		},
		methods: {
			navTouser() {
				uni.switchTab({
					url: "/pages/user/user"
				})
			},
			select(e) {
				// if(this.dataList1.length==0){
				// 	this.num2++
				// 	this.getInfo("2",this.num2);
				// }
				// if(this.dataList2.length==0){
				// 	this.num3++
				// 	this.getInfo("3",this.num3);
				// }
				// if(this.dataList3.length==0){
				// 	this.num4++
				// 	this.getInfo("4",this.num4);
				// }
				this.titleName = e;
			},
			changeTab(e) {
				
				console.log(e);
				this.titleName = e.detail.current
			},
			getMoreOrderList() {
				let num;
				if(this.titleName==0){
					this.num1++;
					num=this.num1
				}
				if(this.titleName==1){
					this.num2++;
					num=this.num2
				}
				if(this.titleName==2){
					this.num3++;
					num=this.num3
				}
				if(this.titleName==3){
					this.num4++;
					num=this.num4
				}
				let num5=this.titleName;
				num5++;
				this.getInfo(num5,num)
			},
			//单选
			// chioce(){
			// 	this.flag=!this.flag
			// },
			send(){
				uni.navigateTo({
					url:"/pages/user/vip/vipsend?list="+JSON.stringify(this.selected)
				})
			},
			getInfo(type,page){
				this.$post(allAgentCard,{type:type,page:page}).then(res=>{
				if(type==1){
					res.data.forEach(item=>{
						this.dataList.push(item)
					})
				}
				if(type==2){
					res.data.forEach(item=>{
						if(this.isAllSelected==true){
							item.flag=true
						}else{
							item.flag=false
						}
						this.dataList1.push(item)
					})
				}
				if(type==3){
					res.data.forEach(item=>{
						this.dataList2.push(item)
					})
				}
				if(type==4){
					res.data.forEach(item=>{
						this.dataList3.push(item)
					})
				}
				console.log(res);
				})
			},
			//全选
			
			// 选中商品
			chioce(item) {
				if(item.flag==true){
					item.flag=false
					this.isAllSelected=false;
				}else{
					item.flag=true;
					let isOr=true;
					this.dataList1.forEach(it=>{
						if(it.flag==false){
							isOr=false;
						}
					})
					if(isOr==true){
						this.isAllSelected=true;
					}
				}
			},
			// 全选商品
			selectAll() {
				if(this.isAllSelected==true){
					this.isAllSelected=false;
					this.dataList1.forEach(item=>{
						item.flag=false;
					})
				}else{
					this.isAllSelected=true;
					this.dataList1.forEach(item=>{
						item.flag=true;
					})
				}
			},
			//取消按钮
			cencel(){
				this.isAllSelected=false;
				this.dataList1.forEach(item=>{
					item.flag=false;
				})
			}
				
		},
		
		onLoad() {
			this.num1++
			this.getInfo("1",this.num1);
			if(this.dataList1.length==0){
				this.num2++
				this.getInfo("2",this.num2);
			}
			if(this.dataList2.length==0){
				this.num3++
				this.getInfo("3",this.num3);
			}
			// if(this.dataList3.length==0){
			// 	this.num4++
			// 	this.getInfo("4",this.num4);
			// }
		}

	}
</script>

<style>
	page {
		background-color: #F0F0F0;
	}

	.swiper-box {
		height: calc(100vh - 170rpx)
	}

	.tab-content {
		height: calc(100vh - 170rpx)
	}

	.style {
		border-bottom: 1px solid #707070;
		font-size: 26rpx;
		color: #333333;
	}

	.search_box {
		display: flex;
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		align-items: center;
		margin-top: 12rpx;
		padding-left: 30rpx;
	}

	.iconzuo {
		font-size: 44rpx;
		color: #B5B5B5;
	}

	.input {
		width: 646rpx;
		height: 64rpx;
		background: #E0E0E0;
		border-radius: 32px;
		padding-left: 50rpx;
		font-size: 20rpx;
		color: #999999;
	}

	.vip_list {
		color: #999999;
		font-size: 26rpx;
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
	}

	.used {
		background-image: url(../../../static/vip_center/vip_used.png);
		background-repeat: no-repeat;
		margin: 30rpx auto;
		width: 690rpx;
		height: 232rpx;
		background-size: 690rpx 232rpx;
		position: relative;
		padding-left: 30rpx;
	}
	.wei{
		background-image: url(../../../static/vip_center/orange.png);
		background-repeat: no-repeat;
		margin: 30rpx auto;
		width: 690rpx;
		height: 232rpx;
		background-size: 690rpx 232rpx;
		position: relative;
		padding-left: 30rpx;
		color: #FFFFFF;
	}
	.yisend{
		background-image: url(../../../static/vip_center/blue.png);
		background-repeat: no-repeat;
		margin: 30rpx auto;
		width: 690rpx;
		height: 232rpx;
		background-size: 690rpx 232rpx;
		position: relative;
		padding-left: 30rpx;
	}
	.used_img {
		width: 100rpx;
		position: absolute;
		top: 20rpx;
		right: 27rpx;
	}

	.used_name {
		margin-top: 25rpx;
		color: #999999;
		font-size: 36rpx;
	}

	.used_num {
		color: #F5F362;
		padding-left: 20rpx;
	}

	.used_time {
		margin-top: 30rpx;
		font-size: 26rpx;
		font-weight: 300;
		color: #F5C362;
	}

	.unissued {
		margin: 30rpx auto;
		width: 690rpx;
		height: 232rpx;
		display: flex;
		border-radius: 12rpx;
	}

	.left {
		background-color: #FFFFFF;
		height: 232rpx;
		width: 609rpx;
		border-radius: 12rpx 0 0 12rpx;
		padding-left: 30rpx;
		padding-top: 20rpx;
	}

	.right {
		width: 81rpx;
		height: 232rpx;
		background-color: #CCCCCC;
		border-radius: 0 12rpx 12rpx 0;
		writing-mode: vertical-lr;
		display: flex;
		align-items: center;
		padding-top: 60rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #1A1311;
	}

	.unissued_name {
		font-size: 36rpx;
		font-weight: 400;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.unissued_card {
		font-size: 32rpx;
		color: #999999;
	}

	.unissued_num {
		padding-left: 20rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.unissued_time {
		margin-top: 10rpx;
		font-size: 26rpx;
		font-weight: 300;
		color: #999999;
	}

	.left_wei {
		width: 559rpx;
	}

	.select_single {
		width: 30rpx;
		height: 30rpx;
		/* border: 1px solid #707070; */
		/* border-radius: 50%; */
		padding: 0;
		position: relative;
		top: 45%;
		margin-right: 20rpx;
		line-height: 30rpx;
	}
	.select_all{
		width: 30rpx;
		height: 30rpx;
		border: 1px solid #707070;
		border-radius: 50%;
		padding: 0;
		margin-left: 35rpx;
		text-align: center;
		line-height: 30rpx;
		
	}
	.bottom{
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 171rpx;
	}
	.selected_botton{
		border: none;
	}
	.bottom_top{
		margin-top: 10rpx;
		display: flex;
		height: 85rpx;
		align-items: center;
	}
	.quanxuan{
		font-size: 28rpx;
		font-weight: 300;
		color: #333333;
		margin-left: 20rpx;
		
	}
	.select_num{
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin-left: 37rpx;
	
	}
	.input_num{
		font-size: 22rpx;
		font-weight: 300;
		color: #999999;
		border-bottom: 1px solid #707070;
		width: 198rpx;
		position: absolute;
		right: 10rpx;
		line-height: 60rpx;
		height: 60rpx;
	}
	.bottom_btm{
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		display: flex;
		align-items: center;
	}
	.cancel{
		margin-left: 218rpx;
	}
	.send{
		margin-left: 186rpx;
	}
	.wei_name{
		font-size: 36rpx;
		font-weight: 300;
		color: #FFFFFF;
	}
	.wei_num{
		color: #FFFFFF;
		padding-left: 20rpx;
		
	}
	.wei_time{
		margin-top: 30rpx;
		font-size: 26rpx;
		font-weight: 300;
		color: #FFFFFF;
	}
	.wei_you{
		width: 81rpx;
		height: 232rpx;
		background-color: #FFFFFF;
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 0 12rpx 12rpx 0;
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
		writing-mode: vertical-lr;
		padding-left: 10rpx;
		text-align: center;
	}
	.list-scroll-content{
		height: 100%;
		padding-bottom: 10rpx;
		padding-top: 20rpx;
	}
	
</style>
